<template>
    <div class="chart">
        <div class="title flex">
            <div>{{ title }}</div>
            <div class="btns">
                <button :class="actived===1?'active':''" @click="changemonth">按月切换</button>
                <button :class="actived===0?'active':''" @click="changeday">按天切换</button>
            </div>
        </div>
        <div class="xuan">
            <div v-show="salesquery.dateType==='month'">年份
                <el-date-picker
                v-model="year"
                type="year" @change="getyear" 
                placeholder="选择年" style="width:70%"/>
            </div>
            <div v-show="salesquery.dateType==='day'">月份
                <el-date-picker
                v-model="month"
                type="month" @change="getmonth"
                placeholder="选择月份" style="width:70%"/>
            </div>
            <div v-if="showgoods">产品
                <table-select
                :tableColumns="[{prop:'code',label:'商品编码',width:'100'},{prop:'name',label:'商品名称',width: '280'}]" labelKey="name" valueKey="id" :value.sync="salesquery.goodsIds" placeholder="请选择产品" url="/api/dropDown/jstGoodsList" style="width:70%;display: inline-block"  @change="changegoods"/>
            </div>
            <div v-if="showchannel">渠道
                <table-select
                :tableColumns="[{prop:'code',label:'渠道编码',width:'100'},{prop:'name',label:'渠道名称',width: '280'}]" labelKey="name" valueKey="id" :value.sync="salesquery.channelIds" placeholder="请选择渠道" url="/api/dropDown/jstChannelList" style="width:70%;display: inline-block"  @change="changechannel"/>
            </div>
        </div>
        <div  style="width: 100%;height: 80%;" :id="barChart"></div>
    </div>
  
</template>

<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/grid');
require('echarts/lib/component/tooltip');
// require('echarts/lib/component/title');
require('echarts/lib/chart/bar');
export default {
    props:{
        barChart:{
            type:String,
            default:'barChart'
        },
        title:{
                type:String,
                default:''
        },
        // xdata:{
        //     default:[],
        //     type:Array
        // },
        datalist:{
            default:[],
            type:Array
        },
        showchannel:{
            default:true,
            type:Boolean
        },
        showgoods:{
            default:true,
            type:Boolean
        },
    },
    watch: {
        datalist(val) {
            this.option.series[0].data=val
            this.myChartOne.setOption(this.option)
        },
        datalist1(val) {
            this.option.series[1].data=val
            this.myChartOne.setOption(this.option)
        },
  },
    data() {
        return {
            actived:1,
            year:new Date(),
            month:new Date(),
            // channelIds:'',
            // goodsIds:'',
            salesquery:{
                dateType:'month',
            },
            option:{},
            xdata:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
        }
    },
    mounted(){
        this.loadbar();
        this.changemonth();
    },
    methods: {
        loadbar() {
            this.option = {
                color:'#588ced',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xdata
                },
                yAxis: {
                    type: 'value',
                    axisLine: {show:false},
                },
                series: [
                    {
                        name: '销售数据',
                        data: this.datalist,//y轴数据
                        type: 'bar'
                    }
                ]
                };
                // 创建 echarts 实例。
        this.myChartOne = echarts.init(document.getElementById(this.barChart))
        window.addEventListener("resize", () => {
            this.myChartOne.resize();
        });
        // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
        this.myChartOne.setOption(this.option)
        },
        getmonth(time){
            var date = new Date(time)
            this.salesquery.year = date.getFullYear()
            this.salesquery.month = date.getMonth() + 1
            console.log(this.salesquery.month,'改变月份');
            this.$emit('getsales',this.salesquery)
        },
        getyear(time){
            var date = new Date(time)
            this.salesquery.year = date.getFullYear()
            this.salesquery.month = ''
            this.$emit('getsales',this.salesquery)
            console.log(time,'改变年份',this.year);
        },
        changemonth(){
            this.actived=1
            this.year=new Date()
            this.salesquery.dateType='month'
            this.salesquery.year=this.year.getFullYear()
            this.getyear(this.year)
            this.option.xAxis.data=['1','2','3','4','5','6','7','8','9','10','11','12']
            this.myChartOne.setOption(this.option)
            console.log('按月切换',);
        },
        changeday(){
            this.actived=0
            this.year=new Date()
            this.month=new Date()
            this.salesquery.dateType='day'
            this.salesquery.year=this.month.getFullYear()
            this.salesquery.month=this.month.getMonth() + 1
            this.getmonth(this.year)
            this.option.xAxis.data=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
            this.myChartOne.setOption(this.option)
            console.log('按天切换');
        },
        changegoods(){
            console.log(this.salesquery.goodsIds,'fffffffffffff');
            this.$emit('getsales',this.salesquery)
        },
        changechannel(){
            console.log(this.salesquery.channelIds,'ssssssssss');
            this.$emit('getsales',this.salesquery)
        },
    },
}
</script>

<style lang="scss" scoped>

    .chart{
        width: 100%;
        height: 100%;
    }
    .xuan{
        display: flex;
        justify-content: right;
        margin-right: 60px;
    }
    .title{
        margin:10px;
        .btns{
            text-align: center;
            flex-grow: 1;
            button{
            border: 1px solid rgb(220, 223, 230);
            background-color: white;
            border-radius: 6px;
            font-size: 12px;
            margin: 0 10px;
            padding: 5px;
            }
            .active{
                background-color: #588ced !important;
                color: white;
            }
        }
        
    }
</style>